<template>
  <svg :width="size" :height="size" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="nearGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" :style="`stop-color:${gradientStart};stop-opacity:1`" />
        <stop offset="100%" :style="`stop-color:${gradientEnd};stop-opacity:1`" />
      </linearGradient>
    </defs>
    
    <!-- Background circle -->
    <circle cx="50" cy="50" r="45" fill="url(#nearGradient)" />
    
    <!-- NEAR "N" logo design -->
    <g transform="translate(25, 25)">
      <!-- Left part of N -->
      <path 
        d="M5 45 L5 5 L15 5 L35 35 L35 5 L45 5 L45 45 L35 45 L15 15 L15 45 Z" 
        :fill="iconColor"
        stroke="none"
      />
    </g>
    
    <!-- Accent dots for modern look -->
    <circle cx="75" cy="25" r="3" :fill="accentColor" opacity="0.8" />
    <circle cx="80" cy="35" r="2" :fill="accentColor" opacity="0.6" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  size?: string | number
  variant?: 'primary' | 'light' | 'dark'
}

const props = withDefaults(defineProps<Props>(), {
  size: 40,
  variant: 'primary'
})

const gradientStart = computed(() => {
  switch (props.variant) {
    case 'light':
      return '#f8fafc'
    case 'dark':
      return '#1e293b'
    default:
      return '#7c3aed'
  }
})

const gradientEnd = computed(() => {
  switch (props.variant) {
    case 'light':
      return '#e2e8f0'
    case 'dark':
      return '#0f172a'
    default:
      return '#4f46e5'
  }
})

const iconColor = computed(() => {
  switch (props.variant) {
    case 'light':
      return '#1e293b'
    case 'dark':
      return '#f8fafc'
    default:
      return 'white'
  }
})

const accentColor = computed(() => {
  switch (props.variant) {
    case 'light':
      return '#7c3aed'
    case 'dark':
      return '#a855f7'
    default:
      return 'rgba(255, 255, 255, 0.8)'
  }
})
</script>